<script setup lang="ts">
import AppVipRuleDesc from './_comp/AppVipRuleDesc.vue'

interface AllComponents {
  [t: number]: Component
}
defineOptions({
  name: 'Vip',
})
definePageMeta({
  layout: 'other',
})
const router = useRouter()
const curTab = ref(0)
// 0 vip-bonus 1积分奖金 2记录
const allComponents: AllComponents = {
  0: defineAsyncComponent(() => import('./_comp/AppVipBonus.vue')),
  1: defineAsyncComponent(() => import('./_comp/AppDaySalary.vue')),
  2: defineAsyncComponent(() => import('./_comp/AppRecord.vue')),
}
const curComponent = computed(() => allComponents[curTab.value])
provide('curTab', curTab)
const list = ref([
  { label: $t('vip_promotion_bonus'), value: 0 },
  { label: $t('vip_vip_bonus'), value: 1 },
  { label: $t('receive_record_label'), value: 2 },
])
function onBack() {
  router.back()
}
</script>

<template>
  <div class="size-full px-4 pt-26 relative">
    <div class="vip-header h-34 left-0 absolute top-0 w-full">
      <div class="absolute top-0 left-0 w-full flex items-center h-12.5">
        <BaseButton type="none" class="ml-4 back-btn size-7" @click="onBack">
          <BaseIcon name="uni-arrow-down" class="rotate-90" />
        </BaseButton>
      </div>
    </div>
    <div class="vip-user mb-4 flex">
      <div class="vip-avatar mr-2 size-14 center bg-[#3A4142] rounded-[100px]">
        <BaseImage class="w-12" url="/images/webp/personal/avatar.png" />
      </div>
      <div class="user-info flex flex-col">
        <div class="mr-auto font-bold text-base mt-auto">
          Qgoecfzasucc
        </div>
        <div class="text-[#B3BEC1] font-extrabold flex mt-auto">
          <span class="mr-1">ID：71191718 </span>
          <BaseIcon name="uni-copy" />
        </div>
      </div>
    </div>
    <AppVipOrRebateHeader />
    <BaseBcTab v-model:active-tab="curTab" :tabs="list" class="mt-4 mb-2" />
    <KeepAlive>
      <component :is="curComponent" />
    </KeepAlive>
    <AppVipRuleDesc class="my-4" />
  </div>
</template>

<style scoped lang="scss">
.vip-header{
    background-image: linear-gradient(180deg, #204535 0%, rgba(32, 69, 53, 0.00) 100%), url('/images/webp/vip/vip-header.webp');;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    // z-index: -1;
}
.back-btn{
    background-color: rgba(0, 0, 0, 0.05);
}
</style>
